<template>
  <div id="tmpl">
    <!-- 商品轮播区域 -->
    <swiperbox :swiperimgs="LunbotuList"></swiperbox>
    <!-- 商品信息区域 -->
    <div class="pro-info">
      <div class="protit">{{proobj.protit}}</div>
      <div class="proprice">
        <span>
          市场价：
          <em>{{proobj.marketprice}}</em>
        </span>
        <span>
          网售价：
          <em>{{proobj.networkprice}}</em>
        </span>
        <span class="red">
          专属价：
          <em>{{proobj.exclusiveprice}}</em>
        </span>
      </div>
    </div>
    <div class="nav">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">图文介绍</mt-tab-item>
        <mt-tab-item id="2">全网比价</mt-tab-item>
        <mt-tab-item id="3">用户评价</mt-tab-item>
      </mt-navbar>
      <div class="page-tab-container">
        <!-- tab-container -->
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <p v-for="(item,index) in LunbotuList" :key="index">
              <img :src="item.img">
            </p>
          </mt-tab-container-item>
          <mt-tab-container-item id="2"></mt-tab-container-item>
          <mt-tab-container-item id="3"></mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
    <div class="bottom-pay flex">
      <div class="left flex">
        <router-link class="cart-icon" to="/cart">
          <i></i>
          购物车
        </router-link>
        <div class="collect-icon">
          <i></i>
          收藏
        </div>
      </div>
      <div class="right flex">
        <div class="add-cart" @click="popupVisible = !popupVisible;btntype=0">加入购物车</div>
        <div class="buy-btn" @click="popupVisible = !popupVisible;btntype=1">立即购买</div>
      </div>
    </div>
    <mt-popup class="sku-box" v-model="popupVisible" position="bottom" >
      <!--规格显示选择-->
      <skubox v-if="flag" :skuobj="proobj" :type="btntype" :ids="id" @getpopupVisible="getpopushow"></skubox>
    </mt-popup>
  </div>
</template>
<script>
// 导入商品轮播组件
import swiperbox from "../swiper/swiper.vue";
// 导入sku组件
import skubox from "../subcomponents/sku/sku_box.vue";
import Vue from "vue";
import {
  Navbar,
  TabItem,
  TabContainer,
  TabContainerItem,
  Popup,
  Toast
} from "mint-ui";

Vue.component(Popup.name, Popup);
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);

export default {
  name: "page-tab-container",
  data() {
    return {
      id: this.$route.params.id, //获取到路由过来的id值
      proobj: {}, //商品对象
      LunbotuList: [],
      selected: "1", //选项卡选中的结果
      selectspec: "", //获得选中的属性拼接成的字符  例如：红色,500ml,非转基因压榨
      popupVisible: false,
      btntype: 0, //0表示是购物车1表示立即下单
      flag:false//数据获取失败,来解决异步数据在子组件中不能正常使用（会报undefined），

    };
  },
  created() {
    this.gerProdetail();
  },
  methods: {
    //获取数据
    gerProdetail() {
      //   this.$http.get("../src/components/prodetail.json"+this.id).then( result => {
      this.$http.get("../src/data/prodetail.json").then(result => {
        this.LunbotuList = result.body.data[0].detail_img;
        this.proobj = result.body.data[0];
        this.flag=true

      });
    },
    getpopushow(childpopVis){
      this.popupVisible=childpopVis
    }
  },
  components: {
    swiperbox,
    skubox
  }
};
</script>
<style scoped>
.pro-info {
  background: #fff;
  padding: 0.75rem;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 0.35rem;
}

.red {
  color: #d1181d;
}

.proprice span {
  display: block;
  padding: 0.25rem 0;
}

.nav {
  border-top: 1px solid #e5e5e5;
}

.mint-navbar a {
  color: #333;
}

.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 3px solid #d1181d;
  color: #d1181d;
  margin-bottom: 0;
}
.cart-icon {
  display: block;
  color: #333;
  width: 50%;
  text-align: center;
  height: 2.5rem;
  line-height: 1rem;
}
</style>